<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    table{
        border: 1px solid;
        margin: auto;
        width: 500px;
    }

    td,th{
        text-align: center;
        border: 1px solid;
    }
    div{
        text-align: center;
        margin: 50px;
    }
</style>

</head>
<body>
<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add" onclick="addTr()">
</div>
<table id="table">
    <caption>学生信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>24</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>
</table>
</body>
<script>
    function delTr(a){
        // 删除
        let flag = confirm("你确定要删除该数据吗?");
        if (flag) {
            a.parentElement.parentElement.parentElement.removeChild(a.parentElement.parentElement);
        } else {
            alert("不要瞎点");
        }
    }
    function addTr(){
        // 1. 获取用户输入的姓名、年龄、性别数据
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        // 2. 获取table标签中现有的标签体内容
        let table = document.getElementById("table");
        let html = table.innerHTML;
        // 3. 添加一行新的数据
        html += '<tr>\n' +
            '            <td>'+name+'</td>\n' +
            '            <td>\'+age+\'</td>\\n\' +\n' +
            '            \'            <td>'+gender+'</td>\n' +
            '            <td><a href="JavaScript:void(0);" onclick="delTr(this)">删除</a></td>\n' +
            '        </tr>';
        // 4. 设置回table标签
        table.innerHTML = html;
    }
</script>
</html>